<template>
  <view class="main">
    <!-- 登录模块 -->
    <view class="login">
      <!-- <img :src="imgPrefixAddress+userInfo.avatar '@/static/WechatIMG260.jpg'"> -->
      <img :src="userInfo.avatar === '' ? '../../static/aboutUs/aboutUsLogo.jpg' : imgPrefixAddress + userInfo.avatar">
      <!-- <img src="@/static/aboutUs/aboutUsLogo.jpg" alt=""> -->
      <button style="background-color: #ffffff;font-size: 30rpx;height: 50rpx;line-height: 50rpx;" plain="true"
        v-if="token != ''">{{userInfo.nickName}}</button>
      <button style="background-color: #ffffff;font-size: 30rpx;height: 50rpx;line-height: 50rpx;" plain="true"
        @click="goLogin" v-else>请点击此处登录</button>
    </view>
    <!-- 订单模块 -->
    <view class="order">
      <view @click="goCustomerOrders">
        <img src="@/static/myPage/kehudingdan.png">
        <text>客户订单</text>
      </view>
      <view @click="goMyCollection">
        <!-- <uni-badge class="uni-badge-left-margin" :text="userInfo.data.data.collect" type="info" absolute="rightTop"
          :offset="[-35, -3]" v-show="userInfo.data.data.collect !==0 " /> -->
        <img src="@/static/myPage/wodeshoucang.png">
        <text>我的收藏</text>
      </view>
      <view @click="goDeliveryAddress">
        <img src="@/static/myPage/pingjiashaidan.png">
        <text>收货地址</text>
      </view>
    </view>
    <!-- 收货地址 -->
    <view class="address">
      <view>联系客服</view>
      <view @click="goPersonalInformation">个人信息</view>
      <view @click="goAboutUs">关于我们</view>
      <view @click="logout">退出账户</view>
    </view>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    data() {
      return {
        //图片前缀
        imgPrefixAddress: "https://bjlr-1316909348.cos.ap-chengdu.myqcloud.com",
        userInfo: {},
        username: '',
        mold: '2',
        code: '',
        isUse: false
      };
    },
    onShow() {
      this.getUserInfo(this.token)
    },
    methods: {
      // 去关于我们
      goAboutUs() {
        uni.navigateTo({
          url: '/subpkg/aboutUs/aboutUs'
        })
      },
      // 去客户订单
      goCustomerOrders() {
        uni.navigateTo({
          url: '/subpkg/customerOrders/customerOrders'
        })
      },
      // 去我的收藏
      goMyCollection() {
        uni.navigateTo({
          url: '/subpkg/myCollection/myCollection'
        })
      },
      // 去评价页面
      // goPublishTheList() {
      //   uni.navigateTo({
      //     url: '/subpkg/publishTheList/publishTheList'
      //   })
      // },
      // 去个人信息页面
      goPersonalInformation() {
        // if()
        uni.navigateTo({
          url: '/subpkg/personalInformation/personalInformation'
        })
      },
      // 去收货地址
      goDeliveryAddress() {
        uni.navigateTo({
          url: '/subpkg/addressList/addressList'
        })
      },
      ...mapMutations('m_user', ['updateUserInfo', 'updateToken']),
      navigateBack() {
        if (this.redirectInfo && this.redirectInfo.openType === 'navigateTo') {
          uni.navigateTo({
            url: this.redirectInfo.form,
            complete: () => {
              this.updateRedirectInfo(null)
            }
          })
        }
      },
      // 获取用户信息
      async getUserInfo(token) {
        const userInfoData = await uni.$http.get('/personalcenter/userinfo', token)
        if (userInfoData.data.code !== 200) return uni.$showMsg('获取用户信息失败')
        console.log(userInfoData);
        this.userInfo = userInfoData.data.data.user
      },
      // 去登录页面
      goLogin() {
        uni.navigateTo({
          url: '/subpkg/loginAndRegister/loginAndRegister',
        })
      },
      // 退出登录
      async logout() {
        // 询问用户是否退出登录
        const [err, succ] = await uni.showModal({
          title: '提示',
          content: '确认退出登录吗？'
        }).catch(err => err)

        if (succ && succ.confirm) {
          // 用户确认了退出登录的操作
          // 需要清空 vuex 中的 userinfo、token 和 address
          this.updateToken('')
          this.userInfo = {}
        }
      }
    },
    computed: {
      ...mapState('m_user', ['token']),
    }
  }
</script>

<style lang="scss" scoped>
  .main {
    background-color: #F3F5F8;


    .login {
      display: flex;
      align-items: center;
      justify-content: left;
      background-color: #FFFFFF;
      width: 90%;
      margin-left: 5%;
      height: 108px;
      border-radius: 10px;
      margin-bottom: 50rpx;

      img {
        width: 120rpx;
        height: 110rpx;
        border-radius: 40%;
        margin-left: 40rpx;
      }

      button[plain] {
        margin-left: 0rpx;
        // margin-top: 40rpx;
        border: 0;
      }
    }

    .order {
      font-size: 20rpx;
      color: #3D3D3D;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      width: 90%;
      // margin-left: 5%;
      margin: 50rpx auto;
      height: 108px;
      border-radius: 10px;
      background-color: #FFFFFF;
      // margin-bottom: 50rpx;

      view {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      img {
        width: 100rpx;
        height: 100rpx;
      }
    }

    .address {
      width: 90%;
      font-size: 14px;
      color: #141414;
      margin-left: 5%;
      background-color: #FFFFFF;

      view {
        padding-left: 20rpx;
        height: 46px;
        line-height: 46px;
        border-bottom: 1px solid #DBE2E9;
      }
    }
  }
</style>